<template>
    <div class="content-box">
      <div class="flex">
        <div class="abroadTest-title">下游境外测试</div>
      </div>
      <div ref="searchBox" class="search-box flex">
        <el-form
          ref="queryForm"
          :inline="true"
          label-width="100px"
        >
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-s-custom"
              size="mini"
              @click="handelAddSecond"
              >开始境外测试</el-button
            >
            <div>
              {{ Object.keys(result).length?result:null}}
            </div>
          </el-form-item>
        </el-form>
      </div>
      <el-dialog
        :title="title"
        width="800px"
        :visible.sync="dialogShow"
        :before-close="handleClose"
      >
       <el-form :model="form" :rules="rules" label-width="100px" ref="formRef">
         <div class="flex">
            <el-form-item label="手机号" prop="phone" style="width: 50%">
              <el-input v-model="form.phone" style="width: 240px" placeholder="请输入手机号" clearable />
            </el-form-item>
            <el-form-item label="姓名" prop="userName" style="width: 50%">
              <el-input v-model="form.userName" style="width: 240px" placeholder="请输入潜客姓名" clearable/>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="年龄" prop="age" style="width: 50%">
             <el-input-number  v-model="form.age" style="width: 240px" :min="18" :max="75"></el-input-number>
            </el-form-item>
            <el-form-item label="身份证号" prop="idCardNo" style="width: 50%">
              <el-input v-model="form.idCardNo" style="width: 240px" placeholder="请输入身份证号" clearable />
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="性别" prop="sex" style="width: 50%">
              <el-radio-group v-removeAriaHidden v-model="form.sex">
                <el-radio v-for="(item,index) in sexList" :key="index" :label="item.value">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="学历" prop="education" style="width: 50%">
              <el-select v-model="form.education" clearable filterable placeholder="请选择学历" style="width: 240px ;margin-right: 20px">
                <el-option
                  v-for="(item,index) in educationList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
               ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="flex">
            <!-- 单选城市选择器 -->
            <el-form-item label="所属省份"  style="width: 50%" prop="provinceCode">
              <el-select 
                v-model="form.provinceCode" 
                clearable 
                filterable 
                placeholder="请选择所属省份" 
                style="width: 240px ;margin-right: 20px"
                @change="handleProvinceChange"
                >
                <el-option
                  v-for="(item,index) in provinceCodeList"
                  :key="index"
                  :label="item.name"
                  :value="item.code"
               ></el-option>
              </el-select>
            </el-form-item>
            <!-- 单选城市选择器 -->
            <el-form-item label="所属城市"  style="width: 50%" prop="cityCode">
              <el-select v-model="form.cityCode" clearable filterable placeholder="请选择所属城市" style="width: 240px ;margin-right: 20px">
                <el-option
                  v-for="(item,index) in cityCodeList"
                  :key="index"
                  :label="item.name"
                  :value="item.code"
               ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <!-- <div class="flex">
            <el-form-item label="所选渠道"  style="width: 50%" prop="channelCode">
                <el-select
                  v-model="form.channelCode"
                  clearable
                  filterable
                  placeholder="请选择"
                  style="width: 240px; margin-right: 20px"
                >
                  <el-option
                    v-for="(item, index) in upChannelOptionList"
                    :key="index"
                    :label="item.productName"
                    :value="item.id"
                  ></el-option>
                </el-select>
            </el-form-item>
          </div> -->
          <el-form-item label="芝麻分" prop="sesame" style="margin-top: 15px">
            <el-radio-group v-removeAriaHidden v-model="form.sesame">
              <el-radio v-for="(item,index) in sesameList" :key="index" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="信用卡" prop="creditCard">
            <el-radio-group v-removeAriaHidden v-model="form.creditCard">
              <el-radio v-for="(item,index) in creditCardList" :key="index" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="社保" prop="social">
            <el-radio-group v-removeAriaHidden v-model="form.social">
              <el-radio v-for="(item,index) in socialList" :key="index" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="公积金" prop="fund">
            <el-radio-group v-removeAriaHidden v-model="form.fund">
              <el-radio v-for="(item,index) in fundList" :key="index" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="flex">
            <el-form-item label="京东白条" prop="baiTiao" style="width: 50%">
              <el-radio-group v-removeAriaHidden v-model="form.baiTiao">
                <el-radio v-for="(item,index) in baiTiaoList" :key="index" :label="item.value">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="花呗" prop="huaBei" style="width: 50%">
              <el-radio-group v-removeAriaHidden v-model="form.huaBei">
                <el-radio v-for="(item,index) in huaBeiList" :key="index" :label="item.value">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <el-form-item label="职业" prop="job">
            <el-radio-group v-removeAriaHidden v-model="form.job">
              <el-radio v-for="(item,index) in jobList" :key="index" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="车产" prop="car">
            <el-radio-group v-removeAriaHidden v-model="form.car">
              <el-radio v-for="(item,index) in carList" :key="index" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="房产" prop="house">
            <el-radio-group v-removeAriaHidden v-model="form.house">
              <el-radio v-for="(item,index) in houseList" :key="index" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="保险保单" prop="policy">
            <el-radio-group v-removeAriaHidden v-model="form.policy">
              <el-radio v-for="(item,index) in policyList" :key="index" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="营业执照" prop="busLicense">
            <el-radio-group v-removeAriaHidden v-model="form.busLicense">
              <el-radio v-for="(item,index) in busLicenseList" :key="index" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="工龄" prop="jobTime">
            <el-radio-group v-removeAriaHidden v-model="form.jobTime">
              <el-radio v-for="(item,index) in jobTimeList" :key="index" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="工资发放形式" prop="wages">
            <el-radio-group v-removeAriaHidden v-model="form.wages">
              <el-radio v-for="(item,index) in wagesList" :key="index" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="flex">
            <el-form-item label="最低月收入" prop="minIncome" style="width: 50%">
              <el-input-number  v-model="form.minIncome" style="width: 240px" :min="0" ></el-input-number>
            </el-form-item>
            <el-form-item label="经营流水" prop="incomeWater" style="width: 50%">
              <el-input-number  v-model="form.incomeWater" style="width: 240px" :min="0" ></el-input-number>
            </el-form-item>
          </div>
          <el-form-item label="信用情况" prop="credit">
            <el-radio-group v-removeAriaHidden v-model="form.credit">
              <el-radio v-for="(item,index) in creditList" :key="index" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="贷款用途" prop="purpose">
            <el-radio-group v-removeAriaHidden v-model="form.purpose">
              <el-radio v-for="(item,index) in purposeList" :key="index" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="flex">
            <el-form-item label="贷款金额" prop="loanMoney" style="width: 50%">
              <el-input-number  v-model="form.loanMoney" style="width: 240px" :min="10000" ></el-input-number>
            </el-form-item>
            <el-form-item label="贷款期限" prop="termNum" style="width: 50%">
              <el-input-number  v-model="form.termNum" style="width: 240px" :min="1" ></el-input-number>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="客户端类型"  style="width: 50%" prop="clientType">
              <el-select v-model="form.clientType" clearable filterable placeholder="请选择客户端类型" style="width: 240px ;margin-right: 20px">
                <el-option
                  v-for="(item,index) in clientTypeList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
               ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="用户ip" prop="ip" style="width: 50%">
              <el-input v-model="form.ip" disabled style="width: 240px" placeholder="请输入IP" clearable/>
            </el-form-item>
          </div>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubmit('formRef')"
            >确 定</el-button
          >
        <el-button @click="handleClose">取 消</el-button>
      </div>
     </el-dialog>
    </div>
  </template>
  
  <script>
  import {getAreaCodeList,getAreaCodeTreeList} from '@/api/system/areaCode'
  import { getUpChannelList } from "@/api/business/channelManagement";
  import {overseasTesting} from '@/api/customer/abroadTest'
  export default {
    dicts: ['loan_sesame_seed_dict'],
    name: "AbroadTest",
    data() {
      return {
        title: "",
        dialogShow: false,
        form: {
            // 学历默认0
            education:0,
            // 芝麻分默认0
            sesame:0,
            // 信用卡默认0
            creditCard:0,
            // 社保默认0
            social:0,
            // 公积金默认0
            fund:0,
            // 京东白条默认0
            baiTiao:0,
            // 花呗默认0
            huaBei:0,
            // 职业信息默认1
            job:1,
            // 车产信息默认0
            car:0,
            // 房产信息默认0
            house:0,
            // 保险保单默认0
            policy:0,
            // 营业执照
            busLicense:0,
            // 工龄
            jobTime:0,
            // 工资发放形式
            wages:0,
            // 最低月收入
            minIncome:0,
            // 经营流水
            incomeWater:0,
            // 信用情况
            credit:0,
            // 贷款用途
            purpose:3,
            // 贷款金额
            loanMoney:10000,
            // 贷款期限
            termNum:3,
            // 客户端类型
            clientType:1,
            // 用户ip
            ip:'127.0.0.1',





        },
        // 学历筛选项
        sexList:[
            {value:0,label:'女'},
            {value:1,label:'男 '},
        ],
        // 学历筛选项
        educationList:[
            {value:0,label:'无 '},
            {value:1,label:'初中'},
            {value:2,label:'高中'},
            {value:3,label:'大专'},
            {value:4,label:'本科及以上'},
            {value:5,label:'研究生及以上'}
        ],
        // 省份筛选项
        provinceCodeList:[],
        // 城市筛选项
        cityCodeList:[],
        // 上游渠道筛选项
        // upChannelOptionList: [],
        // 芝麻分筛选项
        sesameList:[
            {value:0,label:'无'},
            {value:1,label:'550分以下'},
            {value:2,label:'550~599'},
            {value:3,label:'600~649'},
            {value:4,label:'650~699'},
            {value:5,label:'700分以上'},
        ],
        // 信用卡筛选项
        creditCardList:[
            {value:0,label:'无'},
            {value:1,label:'2万元以内'},
            {value:2,label:'2万元以上'},
        ],
        // 社保筛选项
        socialList:[
            {value:0,label:'无'},
            {value:1,label:'6个月以下'},
            {value:2,label:'6个月及以上'},
        ],
        // 公积金筛选项
        fundList:[
            {value:0,label:'无'},
            {value:1,label:'未满6个月'},
            {value:2,label:'6个月及以上'},
        ],
        // 京东白条筛选项
        baiTiaoList:[
           {value:0,label:'无'},
           {value:1,label:'有'},
        ],
        // 花呗筛选项
        huaBeiList:[
           {value:0,label:'无'},
           {value:1,label:'有'},
        ],
        // 职业信息筛选项
        jobList:[
            {value:1,label:'自由职业者'},
            {value:2,label:'上班族'},
            {value:3,label:'公务员/事业/国企'},
            {value:4,label:'企业主'},
            {value:5,label:'个体户'},
        ],
        // 车产信息筛选项
        carList:[
            {value:0,label:'无'},
            {value:1,label:'按揭车'},
            {value:2,label:'全款车'},
        ],
        // 房产筛选项
        houseList:[
            {value:0,label:'无'},
            {value:1,label:'按揭房产'},
            {value:2,label:'全款房产'},
        ],
        // 保险保单筛选项
        policyList:[
            {value:0,label:'无'},
            {value:1,label:'1年以内'},
            {value:2,label:'1年以上'},
        ],
        // 营业执照筛选项
        busLicenseList:[
            {value:0,label:'无'},
            {value:1,label:'两年以下'},
            {value:2,label:'两年以上'},
        ],
        // 工龄筛选项
        jobTimeList:[
            {value:0, label:'无'},
            {value:1, label:'0-6个月'},
            {value:2, label:'6-12个月'},
            {value:3, label:'12个月以上'},
        ],
        // 工资发放形式筛选项
        wagesList:[
            {value:0,label:'无'},
            {value:1,label:'银行卡'},
            {value:2,label:'现金'},
            {value:3,label:'银行转账'},
            {value:4,label:'微信支付宝转账'},
        ],
        // 信用情况筛选项
        creditList:[
            {value:0,label:'无'},
            {value:1,label:'有逾期'},
            {value:2,label:'无逾期'},
        ],
        // 贷款用途筛选项
        purposeList:[
            {value:1,label:'购房'},
            {value:2,label:'结婚'},
            {value:3,label:'消费'},
            {value:4,label:'教育培训'},
            {value:5,label:'购车'},
            {value:6,label:'装修'},
        ],
        // 客户端类型
        clientTypeList:[
            {value:0,label:'未知'},
            {value:1,label:'Android'},
            {value:2,label:'IOS'},
            {value:3,label:'PC'},
        ],

        // 表单校验
        rules: {
          phone:[
            { required: true, message: "请填写手机号", trigger: "blur" },
            { pattern: /^(?:(?:\+|00)86)?1\d{10}$/, message: "请填写正确的手机号", trigger: "blur" }
          ],
          userName:[
            { required: true, message: "请填写姓名", trigger: "blur" },
            { max: 50, message: "名字长度最长50", trigger: "blur"}
          ],
          age:[
            { required: true, message: "请填写年龄", trigger: "change" },
          ],
          sex:[
            { required: true, message: "请选择性别", trigger: "change" }
          ],
          provinceCode:[
            { required: true, message: "请选择所属省份", trigger: "change" }
          ],
          cityCode:[
            { required: true, message: "请选择归属城市", trigger: "change" }
          ],
          clientType:[
            { required: true, message: "请选择客户端类型", trigger: "change" }
          ],
          job:[
            { required: true, message: "请选择职业", trigger: "change" }
          ],
          loanMoney:[
            { required: true, message: "请填写贷款金额", trigger: "change" },
          ],

        },
        // 境外测试结果集
        result:{},
        // 地址级联数据
        addressTree:[]
      };
    },
    created() {
      this.getProvinceAndCity();
      // this.getChannelList()
      this.getIp();// 获取ip地址
    },
    methods: {
      handleProvinceChange(provinceCode) {
        // 根据省份代码过滤城市列表
        let [childObj] = this.addressTree.filter(pre => pre.code === provinceCode);
        this.$set(this,'cityCodeList',childObj?.list)
        // 删除城市选择器的值
        this.$delete(this.form,'cityCode')
      },
       // 将省份、城市数组转换为对象形式
       ArrayFormatObj(arr){
          return arr.reduce((pre, cur)=>{
            pre[cur.code] = cur.name;
            return pre;
          },{})
      },
      /*编辑打开*/
      handelAddSecond(){
        this.keyShow = false;
        this.title = '信息填写';
        this.dialogShow = true;
      },
      /*关闭弹窗*/
      handleClose() {
        this.$refs["formRef"].resetFields();
        this.form = this.$options.data().form;
        this.dialogShow = false;
      },
      // 获取ip地址
      getIp(){
        fetch('https://ipinfo.io/json',{
            method: 'get',
            headers: {
            'Content-Type': 'application/json',
          },
        })
        .then(response => response.json())
        .then(data => {
             this.$set(this.form,'ip',data.ip || '127.0.0.1');
         })
      },
      // 获取全国省份、城市信息
      getProvinceAndCity(){
          // 获取省份
          getAreaCodeList(1).then(res=>{
              this.provinceCodeList = res.data
          })
          // 获取级联数据
          getAreaCodeTreeList().then(res=>{
              this.addressTree = res.data
          })
      },
      // // 获取渠道筛选项列表
      // getChannelList(){
      //   // 获取上游渠道列表
      //   getUpChannelList().then((res) => {
      //     this.upChannelOptionList = res.data;
      //   });
      // },
      /*提交操作*/
      handleSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let params = {};
            params = JSON.parse(JSON.stringify(this.form));
            // 对省份、城市名称单独处理
            params.provinceName = this.ArrayFormatObj(this.provinceCodeList)[params.provinceCode] || "";
            params.cityName = this.ArrayFormatObj(this.cityCodeList)[params.cityCode] || "";
            overseasTesting(params).then(res=>{
                if(res.code==200){
                  // 测试结果回显
                  this.result = res?.data
                  this.$message.success('测试成功');
                  this.handleClose();
                }
            })
          }
        });
      },
    },
  };
  </script>
  
  <style scoped lang="scss">
  .abroadTest-title {
    font-size: 20px;
    color: #333333;
    font-weight: 500;
  }
  .search-box {
    margin: 20px 0 20px;
    padding: 20px 20px 0;
    background: #fff;
    align-items: flex-start;
    border-radius: 6px;
  }
  .search-area {
    position: absolute;
    right: 20px;
  }
  .el-form-item__content {
    flex: 1;
    line-height: 40px;
    position: relative;
    font-size: 14px;
    min-width: 0;
  }
  .el-table {
    // 滚动条加粗
    --scrollbar-height: 9px;
  }
  </style>